import PropTypes from 'prop-types'
import React, { Component } from 'react'
import styles from './SalaryList.module.css'
import { Popconfirm, Table } from 'antd'
import { Link, NavLink } from 'react-router-dom'

const data = [
  {
    departmentId: '1',
    name: '1',
    phone: '1',
    place: '1',
    parentId: '1',
    parentName: false,
    time: '2000 0 0 0'
  }
]

class DepartmentList extends Component {

  constructor (props) {
    super(props)
    this.state = {}
  }

  componentWillMount () {

    let _this = this
    this.columns = [
      {
        title: '部门Id',
        dataIndex: 'id',
      },
      {
        title: '部门名称',
        dataIndex: 'name',
        render: (text, record) => {
          return <Link target="_blank" to={`/admin/department/${record.id}`}>{text}</Link>
        }
      },
      {
        title: '部门电话',
        dataIndex: 'phone',
      },
      {
        title: '办公地点',
        dataIndex: 'place'
      },
      {
        title: '所属部门Id',
        dataIndex: 'parentId'
      },
      {
        title: '所属部门',
        dataIndex: 'parentName',
      },
      {
        title: '部门成立时间',
        dataIndex: 'time'
      },
      {
        title: '操作',
        dataIndex: 'option',
        render: (text, record) =>
          this.props.departmentList.length >= 1 ? (
            <Popconfirm title="操作" onConfirm={() => this.props.handleDelete(record.id)}>
              <a>删除</a>
            </Popconfirm>
          ) : null
      }
    ]
  }

  render () {
    return (
      <div className={styles.container}>
        <Table
          columns={this.columns}
          dataSource={this.props.departmentList}
          bordered
          title={() => '部门列表'}
        />
      </div>
    )
  }
}

DepartmentList.propTypes = {
  departmentList: PropTypes.array,
  handleDelete: PropTypes.func
}

export default DepartmentList
